	<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
	<base href="${pageContext.request.contextPath}/">
	<title>Title</title>
	<link rel="stylesheet" href="assets/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/base.css">
	<style>

	</style>
</head>
<body>
<div class="page fx-col">
	<div class="noshrink fx">
		<form id="form" class="fx-g1 fx align-center layui-form" style="overflow: inherit">
			<input type="hidden" name="tcs.teacherId" value="${teacherId}">
			<select name="tcs.gradeId" lay-verify="required|number" id="grade">
				<option value="">选择年级</option>
			</select>
			<select name="tcs.classId" lay-verify="required|number" id="clazz">
				<option value="">选择班级</option>
			</select>
			<select name="tcs.subjectId" lay-verify="required|number" id="subject">
				<option value="">选择学科</option>
			</select>
			<button  lay-submit="" type="button" id="search_btn" class="layui-btn ml-10">添加</button>
		</form>
	</div>

	<div class="fx-g1">
		<table class="layui-table">
			<thead>
			<tr>
				<th>序号</th>
				<th>教师名称</th>
				<th>年级</th>
				<th>班级</th>
				<th>学科</th>
				<th>操作</th>
			</tr>
			</thead>
			<tbody id="data_list">
			</tbody>
		</table>
	</div>

</div>

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="assets/layui/layui.all.js"></script>

<script>

	/**
	 * 加载年级
	 */
	function loadGradeOptions() {
		$.ajax({
			url: "grade/list",
			dataType: "json",
			success(res) {
				let list = res.data;
				list.unshift({id:"", name:"选择年级"});
				var content = list.map(item => {
					return `<option value="${"${item.id}"}">${"${item.name}"}</option>`
				}).join("");
				$("#grade").html(content);
				layui.form.render('select');
			}
		})
	}

	/**
	 * 加载班级
	 */
	function loadClassOptions() {
		var gradeId = $("#grade").val();
		var content = "";
		if (!gradeId) {
			content = '<option value="">选择班级</option>';
			$("#clazz").html(content);
			layui.form.render('select');
		} else {
			$.ajax({
				url: "clazz/list?gradeId="+gradeId,
				dataType: "json",
				success(res) {
					let list = res.data;
					list.unshift({id:"", name:"选择班级"});
					var content = list.map(item => {
						return `<option value="${"${item.id}"}">${"${item.name}"}</option>`
					}).join("");
					$("#clazz").html(content);
					layui.form.render('select');
				}
			})
		}

	}

	/**
	 * 加载年级
	 */
	function loadSubjectOptions() {
		$.ajax({
			url: "subject/list",
			dataType: "json",
			success(res) {
				let list = res.data;
				list.unshift({id:"", name:"选择学科"});
				var content = list.map(item => {
					return `<option value="${"${item.id}"}">${"${item.name}"}</option>`
				}).join("");
				$("#subject").html(content);
				layui.form.render('select');
			}
		})
	}


	function loadTeacherData() {
		let keywords = $("#keywords").val();
		$.ajax({
			url: "tcs/list",
			type: "post",
			data: {teacherId: ${teacherId}},
			dataType: "json",
			success(res) {
				let data = res.data;
				console.log(data);
				let content = "";
				//jsp -> 先由后端java处理，处理完后生成完整页面代码，-> 发送到用户浏览器 -> 解析页面代码，该由js处理的就作为js处理，该由css处理的就作为css处理
				data.forEach((item, i) => {
					content +=
							`
						<tr>
							<td>${"${i+1}"}</td>
							<td>${"${item.teacherName}"}</td>
							<td>${"${item.gradeName}"}</td>
							<td>${"${item.className}"}</td>
							<td>${"${item.subjectName}"}</td>
							<td>
								<button type="button" data-id="${"${item.id}"}" class="del-btn opt-btn layui-btn layui-btn-sm  layui-btn-danger">
									<i class="layui-icon layui-icon-delete"></i>删除
								</button>
							</td>
						</tr>
						`
				})

				$("#data_list").html(content);


			}
		})
	}

	$(function () {
		var form = layui.form;


		$(document).on("click", ".del-btn", function () {
			let id = $(this).data("id");
			layer.confirm('是否确认删除该数据', {icon: 3, title:'提示'}, function(index){
				$.ajax({
					url: "tcs/del",
					data: {id},
					dataType: "json",
					success(res) {
						if (res.success) {
							layer.msg('删除成功', {icon: 6}, function () {
								loadTeacherData();
							});
						} else {
							layer.msg(res.msg, {icon: 2});
						}
					}
				})

				layer.close(index);
			}, function(index) {
				console.log("点了取消");
				layer.close(index);
			});
		})


		form.on('select()', function(data){
			if($(data.elem).attr("id") == "grade" ) {
				loadClassOptions();
			}

		});


		//监听提交
		form.on('submit()', function(data){
			$.ajax({
				url: "tcs/add",
				type: "post",
				data: $("#form").serialize(),
				dataType: "json",
				success(res) {
					if (res.success) {
						layer.msg('保存成功', {icon: 6}, function () {
							loadTeacherData();
						});
					} else {
						layer.msg(res.msg, {icon: 2});
					}
				}

			})
			return false;
		});


		loadGradeOptions();
		loadSubjectOptions();
		loadTeacherData();
	})
</script>
</html>
